<template>
  <div class="city-warp">
    <div class="content">
      <ct-hd></ct-hd>
      <ct-ls :city-list="cityList"></ct-ls>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import CityHeader from './components/CityHeader.vue';
  import CityList from './components/CityList.vue';

  export default {
    name: 'City',
    data: function() {
      return {
        cityList: []
      }
    },
    components: {
      'ct-hd': CityHeader,
      'ct-ls': CityList,
    },
    mounted: function() {
      this.getUserInfo();
    },
    methods: {
      getUserInfo: function() {
        var _this = this;
        axios.get('http://192.168.0.101:8080/static/city.json')
          .then(function(res) {
            _this.cityList = res.data.data;
          })
          .catch(function(res) {
            console.log(res)
          });
      }
    }

  }
</script>

<style scoped="scoped">
  .city-warp {
    width: 100%;
    height: 100%;
  }
</style>
